<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
<style>
    .btn-outline-black {
        color: black;
        background-color: transparent;
        background-image: none;
        border-color: black;
        border-radius: 30px !important;

    }

    .button-group {
        display: flex;
        gap: 5%;

    }
</style>
<body>

<div class="container" style="width: 400px;margin-top: 10%">
    <form method="post">
        <label class="form-label">注册</label>
        <div class="mb-3">
            <div class="input-icon">
                <label class="form-label">用户名</label>
                <label>
                    <input class="form-control form-control-rounded mb-2" name="username" size="20" type="text">
                </label>
            </div>
            <div class="input-icon">
                <label class="form-label">密码</label>
                <label>
                    <input class="form-control form-control-rounded" name="password" size="21" type="password">
                </label>
            </div>
            <div class="input-icon">
                <label class="form-label">昵称</label>
                <label>
                    <input class="form-control form-control-rounded" name="name" size="21" type="password">
                </label>
            </div>
        </div>
        <div class="button-group">
            <input class="btn btn-lg btn-outline-black" id="register" type="submit" value="注册"/>
            <input class="btn btn-lg btn-outline-black" type="reset" value="重置"/></div>
    </form>
    <div id="message"></div>
</div>
<script src="static/js/jquery.js" type="text/javascript"></script>
<script src="static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#register").click(function (e) {
            e.preventDefault();
            const Username = $("input[name='username']").val();
            const Password = $("input[name='password']").val();
            const Name = $("input[name='name']").val();
            $.ajax({
                url: "ClientRegisterServlet",
                method: "post",
                data: {
                    username: Username,
                    password: Password,
                    name: Name
                },
                dataType: "json",
                success: function (result) {
                    if (result.msg === "success") {
                        window.location.href = "index.html";
                        console.log(result.message);
                    } else {
                        $('#message').text('注册失败，请稍后重试');
                    }
                },
                error: function () {
                    $('#message').text('服务未连接，请稍后重试');
                }
            });

        });
    });
</script>
</body>
</html>